<template>
  <div class='container'>
  <el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="60%"
  :before-close="closeFn">
  >
  <div class="widd">
    <div class="wid">【题型】：单选题</div><div class="wid">【编号】：24</div><div class="wid">【难度】：简单</div><div class="wid">【标签】：随机</div>
  </div>
  <div class="widd tp">
    <div class="wid">【学科】：java</div><div class="wid">【目录】：java基础</div><div class="widdd">【方向】：企业服务</div>
  </div>
  <hr>
  <div class="tp">
    <div class="tp">【题干】：</div>
    <div class="tp">JAVA所定义的版本中不包括?</div>
    <div class="tp">单选题 选项：（以下选中的选项为正确答案)</div>
    <el-radio-group v-model="radio">
    <el-radio :label="1" class="tp">JAVA2 EE</el-radio><br>
    <el-radio :label="2" class="tp">JAVA2 HE</el-radio><br>
    <el-radio :label="3" class="tp">JAVA2 ME</el-radio><br>
    <el-radio :label="4" class="tp">JAVA2 SE</el-radio>
  </el-radio-group>
  </div>
  <hr>
  <div class="tp">
    <div class="wid">【参考答案】：<el-button type="danger" @click="showFn">视频答案预览</el-button></div>
    <video
    v-show="Show"
    src="#"
    preload="preload"
    muted="media"
    controls="controls"
    loop="loop">
    </video>
  </div>
  <hr>
  <div class="tp">
    <div class="wid">【答案解析】：https://cn.vuejs.org/ 有答案</div>
  </div>
  <hr>
   <div class="tp">
    <div class="wid">【题目备注】：https://cn.vuejs.org/ 有答案</div>
  </div>
  <span slot="footer" class="dialog-footer rig">
    <el-button type="primary" @click="closeFn">关闭</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  name: 'quepre',
  data () {
    return {
      Show: false,
      radio: 3
    }
  },
  props: {
    dialogVisible: {
      type: [Boolean]
    }
  },
  methods: {
    showFn () {
      this.Show = true
    },
    closeFn () {
      this.dialogVisible = false
      this.$emit('childShowFn', this.dialogVisible)
    }
  }
}
</script>

<style scoped>
.widd{
  display: flex;
}
.wid{
  flex: 1;
}
.widdd{
  flex: 2;
}
.tp{
  margin-top: 20px;
}
.rig{
 display: flex;
 justify-content: flex-end
}
</style>
